 <template>
  <div class="cashback">
    <c-title text="推荐返现"></c-title>
    <div class="member">
      <div class="img">
        <img :src="totalData.avatar_image" class="completely-fill" alt="" srcset="" />
      </div>
      <div>{{ totalData.nickname }}</div>
    </div>
    <div class="total">
      <div class="dd">
        <div class="money">
          {{ $i18n.t("money") }}
          <van-loading size="1rem" v-if="loading"></van-loading>
          <span v-else>{{ totalData.grand_amount || 0 }}</span>
        </div>
        <div>累计奖励总额</div>
      </div>
      <div class="line"></div>
      <div class="dd">
        <div class="money">
          {{ $i18n.t("money") }}
          <van-loading size="1rem" v-if="loading"></van-loading>
          <span v-else>{{ totalData.grand_may_amount || 0 }}</span>
        </div>
        <div>预计奖励总额</div>
      </div>
    </div>
    <van-cell class="surplus" title="当前剩余返现次数">
      <template slot="right-icon">
        <div class="count">
          <van-loading size="1rem" v-if="loading"></van-loading>
          <span v-else>{{ totalData.surplus_count || 0 }}</span> 次
        </div>
      </template>
    </van-cell>
    <van-sticky :offset-top="40">
      <van-tabs v-model="active" @change="onChange">
        <van-tab title="奖励明细" name="reward"></van-tab>
        <van-tab title="返现次数明细" name="cash_back_count"></van-tab>
      </van-tabs>
    </van-sticky>
    <div class="box">
      <template v-if="list && list.length > 0">
        <div class="item" v-for="(item, i) in list" :key="i">
          <div class="info" v-if="active == 'cash_back_count'">
            <div style="flex: 1;">
              <div>订单号：{{ item.order_sn }}</div>
              <div class="tips">{{ item.created_at }}</div>
            </div>
            <div class="money">{{ item.raise > 0 ? "+" : "" }}{{ item.raise }}次</div>
          </div>
          <div class="info" v-if="active == 'reward'">
            <div style="flex: 1;">
              <div>奖励ID:{{ item.id }}</div>
              <div class="tips">{{ item.created_at }}</div>
            </div>
            <div class="money" @click="clickAngle(i)">{{ $i18n.t("money") }}{{ item.reward }}</div>
            <i class="fa fa-angle-right" :class="{ 'fa-angle-right1': item.change }" @click="clickAngle(i)"></i>
          </div>
          <div class="info info2" v-if="active == 'reward'" :style="{ height: item.change ? '4rem' : '0' }">
            <div class="member-info">
              <div class="img">
                <img :src="item.avatar_image" class="completely-fill" alt="" />
              </div>
              <div>{{ item.nickname }}</div>
            </div>
            <div style="text-align: right;">
              <div class="money">订单金额：{{ $i18n.t("money") }}{{ item.price }}</div>
              <div class="tips">订单号：{{ item.order_sn }}</div>
            </div>
          </div>
        </div>
        <div style="text-align: center; padding: 1rem 0;" v-if="noMore">没有更多了~~</div>
      </template>
      <yz-blank :datas="list" v-show="!loading"></yz-blank>
      <div class="loading" v-show="loading">
        <van-loading size="24px">加载数据中...</van-loading>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "@/utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: "reward",
      totalData: {},
      loading: false,
      list: [],
      isLoading: false,
      isLoadMore: false,
      loading: false,
      page: 1,
      noMore: false,
      url: "plugin.cash-back.frontend.modules.reward.controllers.records.index"
    };
  },
  activated() {
    this.getdata();
  },
  methods: {
    clickAngle(i) {
      this.$set(this.list[i], "change", !this.list[i].change);
    },
    onChange(name) {
      if (name == "reward") this.url = "plugin.cash-back.frontend.modules.reward.controllers.records.index";
      else this.url = "plugin.cash-back.frontend.modules.times.controllers.records.index";
      this.getdata();
    },
    initdata() {
      this.list = [];
      this.isLoadMore = false;
      this.page = 1;
      this.noMore = false;
      this.loading = true;
    },
    setMore(bool) {
      this.isLoadMore = !bool;
      this.noMore = bool;
    },
    getdata() {
      this.initdata();
      $http.post(this.url).then(({ result, msg, data }) => {
        this.loading = false;
        if (result == 1) {
          this.totalData = {
            surplus_count: data.surplus_count,
            grand_amount: data.grand_amount,
            grand_may_amount: data.grand_may_amount,
            avatar_image: data.avatar_image,
            nickname: data.nickname
          };
          this.list = data.page_list.data;
          this.setMore(this.page == data.page_list.last_page);
        } else this.$toast(msg);
      });
    },
    getMoreData() {
      this.loading = true;
      let page = this.page + 1;
      $http.post(this.url, { page }).then(({ result, msg, data }) => {
        this.loading = false;
        if (result == 1) {
          this.page = page;
          this.list = this.list.concat(data.page_list.data);
          this.setMore(this.page == data.page_list.last_page);
        } else this.$toast(msg);
      });
    }
  },
  components: {
    "yz-blank": () => import("@/components/ui_components/yz_blank.vue")
  }
};
</script>

<style scoped lang="scss">
.completely-fill {
  width: 100%;
  height: 100%;
}

.cashback {
  text-align: left;
  $color: #f00b0b;

  .member {
    display: flex;
    align-items: center;
    width: 100%;
    height: 6rem;
    background-color: #ef5450;
    color: #fff;
    font-size: 1rem;
    padding: 0 1rem;

    .img {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 1rem;
    }
  }

  .total {
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 5rem;

    ::v-deep .van-loading {
      display: inline-block;
      margin-left: 2px;
    }

    .dd {
      flex: 1;
      text-align: center;
      line-height: 1.4rem;

      .money {
        color: $color;
      }
    }

    .line {
      background-color: #ccc;
      width: 1px;
      height: 70%;
    }
  }

  .surplus {
    // padding: .6rem 1rem;
    margin: 0.6rem 0;
    // background-color: #fff;
    // display: flex;
    color: #333;

    .count {
      color: $color;
    }

    ::v-deep .van-loading {
      display: inline-block;
      margin-left: 2px;
    }
  }
}

.loading {
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  text-align: left;
  min-height: calc(100vh - 21rem);

  ::v-deep .van-cell {
    align-items: center;
    line-height: normal;
  }

  .item {
    .tips {
      color: #867e7e;
      font-size: 0.75rem;
    }

    .money {
      color: #f00b0b;
      margin-right: 0.5rem;
    }

    .fa-angle-right {
      font-size: 1.2rem;
      transform: rotate(0deg);
      transition: transform 0.3s;
    }

    .fa-angle-right1 {
      transform: rotate(90deg);
    }

    .info {
      background-color: #fff;
      display: flex;
      align-items: center;
      color: #101010;
      font-size: 0.8rem;
      padding: 0.8rem 1rem;
      border-bottom: 1px solid #f6f6f6;

      div {
        line-height: 1.2rem;
      }
    }

    .info2 {
      background-color: #f5f5f5;
      padding: 0 1rem;
      overflow: hidden;
      transition: height 0.3s;

      .member-info {
        flex: 1;
        display: flex;
        align-items: center;

        .img {
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 0.5rem;
        }
      }
    }
  }
}
</style>